<template>
  <div>
    <div class="headMsg">
      <div class="container">
        <div class="left">
          <div class="systemTitle">生涯测评系统</div>
          <div class="schoolName">{{ schoolName }}</div>
        </div>
        <div v-show="hasStudentMsg" class="right">
          <div style="position: relative;">
            <div class="userArea" @click="showStudentMsgDialog = !showStudentMsgDialog">
              <img class="img_1" src="../assets/header/icon_user_n.png" alt="">
              <img class="img_2" src="../assets/header/icon_uesr_s.png" alt="">
              <span>{{ userName }}</span>
            </div>
            <div class="studentDialog" v-show="showStudentMsgDialog">
              <div class="topTitle">
                <div class="dialogName">当前登录学生信息</div>
                <div class="closeImage" @click="showStudentMsgDialog = false">
                  <img src="../assets/login/icon_close.png" alt="">
                </div>
              </div>
              <div class="contentArea">
                <div class="singleItem">
                  <div class="name">姓名</div>
                  <div class="content">{{ studentMsg.name }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">入学年份</div>
                  <div class="content">{{ studentMsg.entrance }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">年级</div>
                  <div class="content">{{ studentMsg.grade }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">班级</div>
                  <div class="content">{{ studentMsg.class_name }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">民族</div>
                  <div class="content">{{ studentMsg.nation }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">生日</div>
                  <div class="content">{{ studentMsg.birth }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">性别</div>
                  <div class="content">{{ studentMsg.gender == 1 ? '男' : '女' }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">学号</div>
                  <div class="content">{{ studentMsg.no }}</div>
                </div>
                <div class="singleItem">
                  <div class="name">备注</div>
                  <div class="content">{{ studentMsg.remark }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="exitArea" @click="dialogVisible = true">
            <img class="img_1" src="../assets/header/icon_exit_n.png" alt="">
            <img class="img_2" src="../assets/header/icon_exit_s.png" alt="">
          </div>

          <!-- 退出本系统 -->
          <el-dialog
            class="exitDialog"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="dialogVisible"
            width="30%">
            <div class="dialogInnerArea">
              <div class="topImageAndTip">
                <div class="leftImage"><img src="../assets/header/icon_notice.png" alt=""></div>
                <div class="rightContent">
                  <div class="tipTitle">退出此系统？</div>
                  <div class="tipContent">请在退出前确定已经生成报告，否则您的测评记录将不被保存。</div>
                </div>
              </div>
              <div class="bottomBtnGroup">
                <div class="btn cancelBtn" @click="handleCancelExit">取消</div>
                <div class="btn confirmBtn" @click="handleExitSystem">确定</div>
              </div>
            </div>
          </el-dialog>

          <!-- 确定要结束答题？ -->
          <el-dialog
            class="exitDialog"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="dialogfinishquestion"
            width="30%">
            <div class="dialogInnerArea">
              <div class="topImageAndTip">
                <div class="leftImage"><img src="../assets/header/icon_notice.png" alt=""></div>
                <div class="rightContent">
                  <div class="tipTitle">确定要结束答题</div>
                  <div class="tipContent">您的答题还未完成，现在结束答题并不会保留您的答题记录。</div>
                </div>
              </div>
              <div class="bottomBtnGroup">
                <div class="btn confirmBtn" @click="handleConfirmFinishTheQuestion">确定</div>
                <div class="btn cancelBtn" @click="dialogfinishquestion = false">取消</div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    
  </div>  
</template>

<script>
import 'element-ui/lib/theme-chalk/dialog.css'
import 'element-ui/lib/theme-chalk/radio.css'
import 'element-ui/lib/theme-chalk/radio-group.css'
import 'element-ui/lib/theme-chalk/radio-button.css'
import '@/plugins/ElementUI'
import ls from 'store2'
import axios from '~/plugins/axios'
export default {
  name: 'topHeader',
  data() {
    return {
      schoolName: '',
      hasStudentMsg: false,
      userName: '',
      showStudentMsgDialog: false,
      studentMsg: {},
      dialogVisible: false,
      dialogfinishquestion: false
    }
  },
  mounted() {
    this.schoolName = ls.get('schoolName')
    if (this.$route.path !== '/studentLogin' && this.$route.path !== '/studentLogin/') {
      this.getUserMsg()
    }
    // 监控浏览器返回按键
    if (window.history && window.history.pushState) {
      // 向历史记录中插入了当前页
      history.pushState(null, null, document.URL);
      if (this.$route.path == '/process' || this.$route.path == '/process/') {
        window.addEventListener('popstate', this.handleBackToIndex, false);
      }
      if (this.$route.path == '/tools/mbti' || this.$route.path == '/tools/interest' || this.$route.path == '/tools/values' || this.$route.path == '/tools/zhineng' || this.$route.path == '/tools/growup' || this.$route.path == '/testResult' || this.$route.path == '/tools/mbti/' || this.$route.path == '/tools/interest/' || this.$route.path == '/tools/values/' || this.$route.path == '/tools/zhineng/' || this.$route.path == '/tools/growup/' || this.$route.path == '/testResult/') {
        window.addEventListener('popstate', this.handleBackToProcess, false);
      }
      if (this.$route.path == '/testResult' || this.$route.path == '/testResult/') {
        window.addEventListener('popstate', this.handleConfirmFinishTheQuestion, false);
      }
      if (this.$route.path == '/reportRecord' || this.$route.path == '/reportRecord/') {
        window.addEventListener('popstate', this.handleReloadPage, false);
      }
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.handleBackToIndex, false);
    window.removeEventListener('popstate', this.handleBackToProcess, false);
    window.removeEventListener('popstate', this.handleConfirmFinishTheQuestion, false);
  },
  methods: {
    // 获取个人信息
    getUserMsg() {
      axios.get('/me').then(res => {
        this.hasStudentMsg = true
        this.studentMsg = res
        this.userName = res.name
        ls.set('studentMsg', res)
      }).finally(() => {
      })
    },
    // 退出
    handleExitSystem() {
      this.$router.replace({ 
        path: '/',
        query: {
          schoolId: ls.get('schoolId')
        }
      })
    },
    // 取消退出
    handleCancelExit() {
      this.dialogVisible = false
      // if (this.$route.path !== '/tools/mbti' || this.$route.path == '/tools/interest' || this.$route.path == '/tools/values' || this.$route.path == '/tools/zhineng' || this.$route.path == '/tools/growup' || this.$route.path == '/testResult' || this.$route.path == '/tools/mbti/' || this.$route.path == '/tools/interest/' || this.$route.path == '/tools/values/' || this.$route.path == '/tools/zhineng/' || this.$route.path == '/tools/growup/' || this.$route.path == '/testResult/') {
      if (this.$route.path == '/process' || this.$route.path == '/process/') {
        window.location.reload()
      }
    },
    handleBackToIndex() {
      this.dialogVisible = true
    },
    handleBackToProcess() {
      this.dialogfinishquestion = true
    },
    handleConfirmFinishTheQuestion() {
      this.$router.replace({ path: '/process' })
    },
    handleReloadPage() {
      window.location.reload()
    },
  }
}
</script>

<style lang="less">
  @importColor: #FF8A00;
  .exitDialog {
    .el-dialog__header { padding: 0; }
    .el-dialog__body { padding: 32px; }
    .dialogInnerArea {
      .topImageAndTip {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 32px;
        .leftImage {
          margin-right: 16px;
          img {
            width: 24px;
            height: 24px;
          }
        }
        .rightContent {
          .tipTitle {
            color: #1C2227;
            font-size: 16px;
            line-height: 24px;
            font-weight: bold;
            margin-bottom: 8px;
          }
          .tipContent {
            color: #6F7880;
            font-size: 14px;
            line-height: 22px;
          }
        }
      }
      .bottomBtnGroup {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .btn {
          width: 65px;
          height: 32px;
          line-height: 32px;
          border-radius: 2px;
          border: 1px solid transparent;
          text-align: center;
          font-size: 14px;
          cursor: pointer;
          margin-right: 8px;
        }
        .btn:last-child { margin-right: 0; }
        .cancelBtn {
          border-color: #D9D9D9; 
          color: #6F7880;
        }
        .confirmBtn {
          color: #fff;
          background: #FF8A00;
        }
      }
    }
  }
  .el-loading-spinner .el-loading-text, .el-loading-spinner i, .el-select-dropdown__item.selected, .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
    color: @importColor;
  }
  .el-dialog__headerbtn {
    outline: none;
  }
  .el-loading-spinner .path {
    stroke: @importColor;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: @importColor;
  }
  html {
    user-select: none;
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
  }
</style>


<style lang="less" scoped>
  .headMsg {
    width: 100%;
    background: #1C2227;
    .container {
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .systemTitle {
          color: #fff;
          font-size: 18px;
          line-height: 24px;
          font-weight: bold;
        }
        .schoolName {
          color: #fff;
          font-size: 12px;
          line-height: 16px;
          margin-left: 16px;
        }
      }
      .right {
        display: flex;
        justify-content: flex-start;
        .userArea {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          width: 120px;
          height: 56px;
          padding-left: 19px;
          background: transparent;
          img {
            width: 24px;
            height: 24px;
            margin-right: 16px;
          }
          .img_1 { display: inline-block; }
          .img_2 { display: none; }
          span {
            color: #B8BCBF;
            font-size: 14px;
          }
        }
        .userArea:hover {
          background: #272E33;
          .img_2 { display: inline-block; }
          .img_1 { display: none; }
          span { color: #EBECED; }
        }
        .exitArea {
          width: 56px;
          height: 56px;
          cursor: pointer;
          background: transparent;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
          }
          .img_1 { display: inline-block; }
          .img_2 { display: none; }
        }
        .exitArea:hover {
          background: #272E33;
          .img_2 { display: inline-block; }
          .img_1 { display: none; }
        }
      }
    }
  }
  .studentDialog {
    width: 280px;
    background: #fff;
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
    position: absolute;
    top: 64px;
    left: -104px;
    z-index: 10;
    .topTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 19px 16px 24px;
      border-bottom: 1px solid #E5E8ED;
      .dialogName {
        color: #282828;
        font-size: 12px;
        line-height: 16px;
      }
      .closeImage {
        width: 16px;
        height: 16px;
        line-height: 10px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .contentArea {
      padding: 16px 24px 32px 24px;
      .singleItem {
        margin-bottom: 24px;
        display: flex;
        justify-content: flex-start;
        .name {
          width: 60px;
          margin-right: 15px;
          color: #999;
          font-size: 12px;
          line-height: 16px;
        }
        .content {
          color: #282828;
          font-size: 12px;
          line-height: 16px;
          width: 168px;
        }
      }
    }
  }
</style>